<template>
  <view>
    <view v-if="visible" class="mark" @click="visible = false"></view>
    <view class="cu-dropdown__body" @click="visible = !visible">
      <slot></slot>
      <view v-if="visible" class="cu-dropdown__items" :class="[placement]"><slot name="dropdown"></slot></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    placement: {
      type: String,
      default: 'top-start' // top-start/top-end/bottom-start/bottom-end
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    onClickEvent() {
      console.log('onItemClick')
    }
  }
}
</script>

<style scoped lang="scss">
.mark {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.cu-dropdown__body {
  display: inline-block;
  position: relative;
  z-index: 3;
  .cu-dropdown__items {
    position: absolute;
    z-index: 3;
    background-color: #fff;
    box-shadow: 0px 3rpx 14rpx 1px rgba(186, 186, 186, 0.59);
    border-radius: 8rpx;
    &::after {
      content: '';
      position: absolute;
      width: 20rpx;
      height: 20rpx;
      background: #fff;
      transform: rotate(45deg);
    }
    &.top-start {
      bottom: -10px;
      left: 0;
      transform: translateY(100%);
      &::after {
        top: -4px;
        left: 24rpx;
      }
    }

    &.top-end {
      bottom: -10px;
      right: 0;
      transform: translateY(100%);
      &::after {
        top: -4px;
        right: 24rpx;
      }
    }
  }
}
</style>
